<template>
  <view class="container">
    <scroll-view scroll-y="true" style="width: 100%; height: 100vh" @scrolltolower="tolower">
      <view class="header">
        <!-- 搜索框 -->
        <view class="search" :style="[top]">
          <image src="../../../static/icon/search.png" mode="aspectFill" style="width: 28rpx; height: 28rpx; position: absolute; left: 70rpx"></image>
          <input type="text" placeholder="搜索教师名称或科目" placeholder-class="txtstyle" class="ipt" v-model="name" @input="search" />
        </view>
        <u-dropdown inactive-color="#fff" active-color="#fff" menu-icon="arrow-down-fill" menu-icon-size="24" ref="dropdown">
          <u-dropdown-item title="全部">
            <view class="slot-content" @click="fnall"><view style="background-color: #fff" class="filitem">全部</view></view>
          </u-dropdown-item>
          <u-dropdown-item title="排序">
            <view class="slot-content">
              <view style="background-color: #fff">
                <view v-for="(item, index) in sortlist" :key="index" class="filitem" @click="fnsort(index)">{{ item }}</view>
              </view>
            </view>
          </u-dropdown-item>
          <u-dropdown-item title="筛选">
            <view class="slot-content">
              <scroll-view scroll-y="true" style="width: 100%; height: 1154rpx">
                <view style="background-color: #fff; box-sizing: border-box; padding: 30rpx">
                  <view class="titleitem">年级</view>
                  <view style="display: flex; flex-wrap: wrap">
                    <view
                      :class="{ gradeitem: true, commonstyle: gradeindex == index }"
                      v-for="(item, index) in grade"
                      :key="item.id"
                      @click="(gradeindex = index), (grade_id = item.id)"
                    >
                      {{ item.name }}
                    </view>
                  </view>
                  <view class="titleitem">科目</view>
                  <view style="display: flex; flex-wrap: wrap">
                    <view
                      :class="{ gradeitem: true, commonstyle: subjectindex == index }"
                      v-for="(item, index) in subject"
                      :key="item.id"
                      @click="(subjectindex = index), (subject_id = item.id)"
                    >
                      {{ item.name }}
                    </view>
                  </view>
                  <view class="titleitem">类别</view>
                  <view style="display: flex; flex-wrap: wrap">
                    <view
                      :class="{ gradeitem: true, commonstyle: categoryindex == index }"
                      v-for="(item, index) in category"
                      :key="item.id"
                      @click="(categoryindex = index), (identity_role = item.id)"
                    >
                      {{ item.name }}
                    </view>
                  </view>
                  <view class="titleitem">等级</view>
                  <view style="display: flex; flex-wrap: wrap">
                    <view
                      :class="{ gradeitem: true, commonstyle: leavelindex == index }"
                      v-for="(item, index) in leavel"
                      :key="item.id"
                      @click="(leavelindex = index), (level_id = item.id)"
                    >
                      {{ item.name }}
                    </view>
                  </view>
                  <view class="titleitem">性别</view>
                  <view style="display: flex; flex-wrap: wrap">
                    <view
                      :class="{ gradeitem: true, commonstyle: genderindex == index }"
                      v-for="(item, index) in genderlist"
                      :key="item.id"
                      @click="(genderindex = index), (sex = item.id)"
                    >
                      {{ item.name }}
                    </view>
                  </view>
                  <view class="btn">
                    <view class="resetbtn" @click="fnreset">重置</view>
                    <view class="okbtn" @click="fnok">确定</view>
                  </view>
                </view>
              </scroll-view>
            </view>
          </u-dropdown-item>
        </u-dropdown>
      </view>
      <!-- 教师列表 -->
      <scroll-view scroll-y="true" id="box" :style="{ height: boxHeight * 2 + 'rpx' }">
        <view class="teacherlist">
          <view class="listitem" v-for="item in list" :key="item.id" @click="goteacherdetail(item.id)">
            <image :src="imgUrl + item.avatar" mode="aspectFill" style="width: 186rpx; height: 186rpx"></image>
            <view class="right">
              <view class="righttop">
                <view style="display: flex; align-items: center">
                  <view class="username">{{ item.byname }}</view>
                  <view class="usercareer">{{ item.identity_name }}</view>
                </view>
                <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 26rpx; color: #222222">{{ item.host_grade + '/' + item.host_subject }}</view>
              </view>
              <view class="rightmiddel">
                <view class="teachage">教龄{{ item.teaching_len }}年</view>
                <view class="money">￥{{ item.price }}/起</view>
              </view>
              <view class="rightbottom">
                <view class="hobbylist">
                  <view class="hobbyitem" v-for="(item, index) in item.keyword" :key="index">{{ item }}</view>
                </view>
                <view class="long">{{ item.distance }}km</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view style="width: 750rpx; height: 100rpx"></view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      boxHeight: '', // 盒子的高度
      currenstatus: 0, //当前点击的状态
      imgUrl: '', //图片的基地址
      list: [], //数据列表
      page: 1, // 页码
      name: '', // 搜索的标题
      lat: '',
      lon: '',
      teaching_len: '0', //教龄
      distance: '0', //距离
      teaching_num: '0', // 授课最多
      grade_id: '', //年级
      subject_id: '', // 科目
      identity_role: '', // 类别
      level_id: '', //等级
      gender: '', // 性别
      top: {
        paddingTop: '0rpx'
      },
      sortlist: ['距离最近', '授课最多', '教龄最久'],
      gradeindex: null,
      subjectindex: null,
      categoryindex: null,
      leavelindex: null,
      genderindex: null,
      grade: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '初一', '初二', '初三', '高一', '高二', '高三'],
      subject: ['语文', '数学', '英语'],
      category: ['专职老师', '大学生'],
      leavel: ['优秀老师', '普通老师'],
      genderlist: [
        { id: 1, name: '女' },
        {
          id: 2,
          name: '男'
        }
      ],
      sex: ''
    };
  },
  methods: {
    // 获取教师列表
    getlist() {
      uni.showLoading({
        title: '加载中'
      });
      uni.getLocation({
        success: async (res) => {
          this.lat = res.latitude;
          this.lon = res.longitude;
          const res2 = await uni.$http.post('/patriarch/list', {
            page: this.page,
            lat: res.latitude,
            lon: res.longitude,
            teaching_len: this.teaching_len, //教龄
            distance: this.distance, //距离
            teaching_num: this.teaching_num, // 授课最多
            grade_id: this.grade_id, //年级
            subject_id: this.subject_id, // 科目
            identity_role: this.identity_role, // 类别
            level_id: this.level_id, //等级
            gender: this.sex, // 性别
            name: this.name // 搜索
          });
          console.log('获取的教师列表', res2);
          this.list = res2.data.data.list;
          uni.hideLoading();
          // if (res2.data.data.list.length != 0) {
          //   this.list.push(...res2.data.data.list);
          // } else {
          //   uni.showToast({
          //     title: '数据加载完毕',
          //     icon: 'none'
          //   });
          // }
        }
      });
    },
    //  触底加载更多
    tolower() {
      console.log('触底了');
      // this.page++;
      // this.getlist();
    },
    // 搜索教师
    search() {
      this.getlist();
    },
    // 获取年级列表
    async getgradelist() {
      const res = await uni.$http.post('/index/gradeList', {
        name: ''
      });
      console.log('获取的年级', res);
      this.grade = res.data.data.list;
    },
    // 获取科目
    async getsubject() {
      const res = await uni.$http.post('/index/subjectList', {
        name: ''
      });
      console.log('获取的科目', res);
      this.subject = res.data.data.list;
    },
    // 获取教师类别
    async getcategory() {
      const res = await uni.$http.post('/index/list', {
        status: '1'
      });
      console.log('获取教师类别', res);
      this.category = res.data.data;
    },
    //获取教师等级
    async getleavel() {
      const res = await uni.$http.post('/index/levelList');
      console.log('获取教师等级', res);
      this.leavel = res.data.data.list;
    },
    // 点击全部
    fnall() {
      this.getlist();
    },
    // 点击排序
    fnsort(index) {
      this.currenstatus = 1;
      if (index == 0) {
        this.distance = 1;
        this.teaching_num = 0;
        this.teaching_len = 0;
        console.log(index, this.distance);
        this.getlist();
      } else if (index == 1) {
        this.distance = 0;
        this.teaching_num = 0;
        this.teaching_len = 1;
        this.getlist();
      } else if (index == 2) {
        this.distance = 0;
        this.teaching_len = 0;
        this.teaching_num = 1;
        this.getlist();
      }
      this.$refs.dropdown.close();
    },
    // 点击重置
    fnreset() {
      this.gradeindex = null;
      this.subjectindex = null;
      this.categoryindex = null;
      this.leavelindex = null;
      this.genderindex = null;
    },
    // 点击确定筛选
    fnok() {
      this.currenstatus = 2;
      this.getlist();
      this.$refs.dropdown.close();
    },
    // 点击全部
    fnall() {
      (this.teaching_len = '0'), //教龄
        (this.distance = '0'), //距离
        (this.teaching_num = '0'), // 授课最多
        (this.grade_id = ''), //年级
        (this.subject_id = ''), // 科目
        (this.identity_role = ''), // 类别
        (this.level_id = ''), //等级
        // (this.gender = ''), // 性别
        (this.sex = ''); // 性别
      this.getlist();
      this.$refs.dropdown.close();
    },
    // 点击跳转到教师详情
    goteacherdetail(id) {
      console.log(id);
      uni.navigateTo({
        url: '/parents/teacherdetail/teacherdetail?id=' + id
      });
    }
  },
  created() {
    // 初始化状态(为了分页的时候区分加载那个状态下的数据 0=全部 1=排序 2=筛选)
    this.currenstatus = 0;
    // 获取用户当前的位置
    if (uni.getStorageSync('token')) {
      this.getlist();
    }
    // 获取年级
    this.getgradelist();
    // 获取科目
    this.getsubject();
    // 获取类别
    this.getcategory();
    // 获取等级
    this.getleavel();
    // 图片的基地址
    this.imgUrl = this.imgurl;
    const app = getApp();
    this.isiphone = app.$vm.isIPhone;
    if (this.isiphone) {
      this.top.paddingTop = app.$vm.liuhai + 50 + 'rpx';
    }
  },
  mounted() {
    uni.getSystemInfo({
      success: (e) => {
        console.log(e);
        const query = uni.createSelectorQuery().in(this);
        query
          .select('#box')
          .boundingClientRect((data) => {
            this.boxHeight = e.screenHeight - data.top - 50;
            console.log(this.boxHeight);
          })
          .exec();
      }
    });
  }
};
</script>

<style lang="scss" scoped>
/deep/.u-dropdown__menu {
  z-index: 99 !important;
}
.container {
  box-sizing: border-box;
  height: 100vh;
  overflow: scroll;
  .header {
    box-sizing: border-box;

    width: 750rpx;
    height: 260rpx;
    background-color: #3553e8;
    .search {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      .ipt {
        box-sizing: border-box;
        width: 480rpx;
        height: 64rpx;
        background: #5d75ed;
        color: #fff;
        border-radius: 100rpx 100rpx 100rpx 100rpx;
        margin-left: 40rpx;
        padding-left: 80rpx;
      }
      /deep/ .txtstyle {
        color: #fff !important;
        font-size: 26rpx !important;
      }
    }
  }
  .filter {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 750rpx;
    margin-top: 60rpx;
    color: #fff;
  }
  .teacherlist {
    .listitem {
      box-sizing: border-box;
      display: flex;
      width: 750rpx;
      height: 190rpx;
      padding: 40rpx 27rpx;
      margin-bottom: 30rpx;
      .right {
        flex: 1;
        margin-left: 20rpx;
        .righttop {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .usercareer {
            box-sizing: border-box;
            width: 104rpx;
            height: 40rpx;
            background: #eaedfd;
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 22rpx;
            color: #3553e8;
            text-align: center;
            line-height: 40rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .username {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #222222;
            margin-right: 14rpx;
          }
        }
        .rightmiddel {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 12rpx;
          .teachage {
            font-weight: 500;
            font-size: 26rpx;
            color: #222222;
          }
          .money {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 24rpx;
            color: #ff3400;
          }
        }
        .rightbottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 40rpx;
          .hobbylist {
            display: flex;
            align-items: center;
            .hobbyitem {
              box-sizing: border-box;
              height: 40rpx;
              background: #ffffff;
              border-radius: 20rpx 20rpx 20rpx 20rpx;
              border: 1rpx solid #3553e8;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 22rpx;
              color: #3553e8;
              margin-right: 10rpx;
              text-align: center;
              line-height: 30rpx;
              padding: 4rpx 12rpx;
              text-overflow: ellipsis; /* 溢出显示省略号 */
              overflow: hidden; /* 溢出隐藏 */
              white-space: nowrap; /* 强制不换行 */
            }
          }
          .long {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #222222;
          }
        }
      }
    }
  }
  .filitem {
    box-sizing: border-box;
    padding: 30rpx;
    font-size: 28rpx;
  }
  .titleitem {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #333333;
    margin: 30rpx 0;
  }

  .gradeitem {
    width: 112rpx;
    height: 60rpx;
    margin-top: 20rpx;
    margin-right: 20rpx;
    text-align: center;
    line-height: 60rpx;
    background: #f8f8f8;
    color: #666666;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    border: 2rpx solid #f1f1f1;
  }
  .commonstyle {
    background: #ebeeff;
    border: 2rpx solid #3553e8;
    color: #3553e8;
  }
  .btn {
    margin-top: 40rpx;
    display: flex;
    .resetbtn {
      box-sizing: border-box;
      width: 172rpx;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #999999;
      margin-right: 30rpx;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
      border: 2rpx solid #999999;
    }
    .okbtn {
      box-sizing: border-box;
      width: 468rpx;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #ffffff;
      background: #3553e8;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
  }
}
</style>

/*
<!-- <style>
.u-dropdown__menu {
  z-index: 99 !important;
}
</style> -->
*/
